import React, { Component } from 'react';
import { NavBar, Swiper, Mask, Button, Tag, List, Badge, Cascader } from 'antd-mobile'
import { NavLink,Link,withRouter } from 'react-router-dom'
import {
  ShopbagOutline,
  MessageOutline,
  AppstoreOutline,
  UpOutline,
} from "antd-mobile-icons";
import "./bottomshopp.css";
import request from "../../api"
interface Props {
  pid: string,
  history:any,
  location:any,
  match:any
}
interface State {
  ShopNum: number
}
var id = localStorage.getItem("userid")
class Bottomshopp extends Component<Props, State>{
  constructor(props: Props) {
    super(props);
    this.state = {
      ShopNum: 0
    }

  }

  goshop() {
    this.props.history.push("/index/cateshopp")
    console.log("跳转购物车页");

  }

  //查看购物车
  look_shopp(){
    request.cart.cart_list({userid:id}).then((ok)=>{
        if (ok.data.code==="200") {
          this.setState({ShopNum:ok.data.data.length})
        }
        
    })
  }

  //加入购物车
  add() {
    console.log("加入购物车");
    console.log(this.props.pid);
    
    var id = localStorage.getItem("userid")
    request.cart.cart_add({ userid: id, proid: this.props.pid, num: "1" }).then((ok) => {
      this.look_shopp()

    })
  }
  //页面挂载时查看购物车数量
  componentDidMount(): void {
    this.look_shopp()
  }
  render() {
    return (
      <div className="xiangqing-bottom">
        <ul>
          <li onClick={() => { }}>
            <MessageOutline fontSize={26} />
            客服
          </li>
          <li
            onClick={() => {
              this.goshop();
            }}
          >
            <Badge content={this.state.ShopNum}>
              <div></div>
            </Badge>
            <ShopbagOutline fontSize={26} />
            购物车
          </li>
          <li>
            <AppstoreOutline fontSize={26} />
            店铺
          </li>
          <li className="anniu">
            <Button
              color="warning"
              className="button-left"
              onClick={() => {
                this.add();
              }}
            >
              加入购物车
            </Button>
            <Button color="danger" className="button-right">
              立即购买
            </Button>
          </li>
        </ul>
      </div>
    );
  }
}

export default withRouter(Bottomshopp);